import React from 'react';
import {connect} from 'dva';
import styles from './index.less';
import { Accordion, List } from 'antd-mobile';
import { getNameByData } from '@/utils/tools';
/**
 * 流程进度
 * @type {Object}
 */
class cProcessLog extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }
  render(){
    return (
      <div className={styles.baseList}>
        <div className={`${styles.item} ${styles.blockItem}`}>
          <div className={styles.des}>Process Logs</div>
          <div className={styles.value}>
            <div className={styles.labels}>
              <div className={styles.label}>
                Employee
              </div>
              <div className={styles.label}>
                Complete Time
              </div>
              <div className={styles.label}>
                Status
              </div>
            </div>
            <Accordion className={styles.cList} onChange={this.onChange}>
              {
                this.props.detail.mast && this.props.detail.mast.mobileProcessLogs && this.props.detail.mast.mobileProcessLogs.map((item, index) => {
                  const headerDom = (cc) => {
                    return (
                      <div className={styles.headerValues}>
                        <div>{getNameByData(cc.caller, this.props.detail.mast.mobileProcessLogs, 'caller', 'callerName')}</div>
                        <div>{global.moment(cc.fromDate).format('YYYY-MM-DD')}</div>
                        <div>{cc.status}</div>
                      </div>
                    )
                  }
                  return (
                    <Accordion.Panel header={headerDom(item)} key={index}>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Employee</div>
                        <div className={styles.cValue}>{item.caller} {getNameByData(item.caller, this.props.detail.mast.mobileProcessLogs, 'caller', 'callerName')}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Receive Time</div>
                        <div className={styles.cValue}>{global.moment(item.fromDate).format('YYYY-MM-DD HH:mm')}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Complete Time</div>
                        <div className={styles.cValue}>{global.moment(item.thruDate).format('YYYY-MM-DD HH:mm')}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Status</div>
                        <div className={styles.cValue}>{item.status}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Action</div>
                        <div className={styles.cValue}>{item.actionName}</div>
                      </div>
                      <div className={styles.cItem}>
                        <div className={styles.cDes}>Remark</div>
                        <div className={styles.cValue}>{item.remark}</div>
                      </div>
                    </Accordion.Panel>
                  )
                })
              }
           </Accordion>
          </div>
        </div>
      </div>
    )
  }
}


function mapStateToProps(state) {
  return {
    ...state.detail
  }
}
export default connect(mapStateToProps)(cProcessLog);
